<template>
  <div>
    <home-menu></home-menu>
    <div class="level">
      <router-link :to="{path: 'login'}">
        <div class="jumpToImg">
          <img src="static/images/ass.png" />
        </div>
      </router-link>
      <router-link :to="{path: 'login', query: {id: 1}}">
        <div class="jumpToImg">
          <img src="static/images/rank.png" />
        </div>
      </router-link>
    </div>
    <div class="home-book">
      <router-link :to="{path: 'login'}">
        <div class="jumpBook">
          <img src="static/images/book.png" />
          <h3 class="bookName">书名</h3>
          <span class="author">作者</span>
        </div>
      </router-link>
      <router-link :to="{path: 'login', query: {id: 1}}">
        <div class="jumpBook">
          <img src="static/images/book.png" />
          <h3 class="bookName">书名</h3>
          <span class="author">作者</span>
        </div>
      </router-link>
      <router-link :to="{path: 'login', query: {id: 1}}">
        <div class="jumpBook">
          <img src="static/images/book.png" />
          <h3 class="bookName">书名</h3>
          <span class="author">作者</span>
        </div>
      </router-link>
    </div>
    <div class="process">
      <h3 class="tit">排行</h3>
      <home-tabs></home-tabs>
    </div>


    <!-- <home-header></home-header>
    <home-swiper></home-swiper>
    Hello Word
    <h1>{{msg}}</h1>
    <router-link :to="{path: 'login', query: {id: 1}}">
      <div class="header-right">
        <span class="arrow-icon jumpToPath">跳转并传递参数</span>
      </div>
    </router-link>
    <home-footer></home-footer> -->
  </div>
</template>

<script>
import HomeMenu from '@/pages/home/components/menu'
import HomeHeader from '@/pages/public/components/header'
import HomeSwiper from '@/pages/home/swiper'
import HomeTabs from '@/pages/home/tabs'
import HomeFooter from '@/pages/public/components/footer'

export default {
  name: 'Home',
  components: {
    HomeMenu,
    HomeHeader,
    HomeSwiper,
    HomeTabs,
    HomeFooter
  },
  data () {
    return {
      msg: 'Hello Msg'
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/varibles.styl'
  .level
    display flex
    padding 0 .3rem
    width 100%
    a:nth-child(1)
      margin-right .5rem
    a
      flex 1
      img
        width 100%
  .process
    h3.tit
      background #f2f2f2
      color #333
      font-size .34rem
      height .6rem
      line-height .6rem
      text-align left
      padding-left .45rem
      position relative
      margin .4rem 0 .6rem
      &:before 
        content ""
        background $c21b
        display block
        height .24rem
        left .3rem
        position absolute
        top .18rem
        width .03rem
</style>
